import React from 'react';
import { Typography } from '@arco-design/web-react';
import cs from 'classnames';
import { useInstructions } from '@/hooks/checkIn';
import { useModal } from '@/components/Modal';
import styles from './index.module.less';

const { Paragraph, Text } = Typography;

export function RuleFooter() {
  const { cheked, setCheked } = useInstructions();
  return (
    <Typography className={styles.footer}>
      <img
        className={styles.check}
        onClick={() => {
          setCheked(!cheked);
        }}
        src={
          cheked ? require('./img/checked.png') : require('./img/unchecked.png')
        }
      />
      <Text className={styles.normal}>我同意并遵守</Text>
      <Text
        className={styles.rule}
        onClick={() => {
          window.open('/servicerule');
        }}
      >
        《星乐动平台商户服务协议》
      </Text>
    </Typography>
  );
}

export function RuleContent() {
  const { hideModal } = useModal();
  return (
    <Typography className={styles.page}>
      <Paragraph className={styles.header}>
        <Text bold>入住说明</Text>
        <img
          className={styles.close}
          onClick={() => {
            hideModal();
          }}
          src={require('./img/close.png')}
        />
      </Paragraph>
      <Paragraph className={styles.subtitle} bold>
        商户入驻前，请仔细阅读入驻说明，申请提交即视为同意以下说明
      </Paragraph>
      <Paragraph className={cs(styles['one-line'], styles.destitle)} bold>
        ① 资料准备:
      </Paragraph>
      <Paragraph className={styles['destitle-content']}>
        <Paragraph className={styles.desc}>
          1.企业/个体户:营业执照、法人身份证正反面照片、企业/个人账户、开户许可证等
        </Paragraph>
        <Paragraph className={styles.desc}>
          2. 图片要求:大小不超过10M;支持格式:.png jpg jpeg;
        </Paragraph>
        <Paragraph className={styles.desc}>3. 收款账户:可对公或对私;</Paragraph>
      </Paragraph>
      <Paragraph className={cs(styles['two-line'], styles.destitle)}>
        ② 费用相关:
      </Paragraph>
      <Paragraph className={styles['destitle-content']}>
        <Paragraph className={styles.desc}>
          1. 入驻费:前100名商户入驻，不收取入驻费;
        </Paragraph>
        <Paragraph className={styles.desc}>
          2. 软件使用费:前100名商户入驻，不收取软件使用费;
        </Paragraph>
        <Paragraph className={styles.desc}>
          3. 增值服务费:前100名商户入驻，无任何增值服务;
        </Paragraph>
        <Paragraph className={styles.desc}>
          4. 支付通道费:每笔订单收取1%的支付通道费;
        </Paragraph>
      </Paragraph>
    </Typography>
  );
}
